<template>
  <div>
    <div class="search">
        <div class="title">
            Project Management
        </div>
        <div style="width:30%;margin-right:0">
            <el-input v-model="projectSearchStr" placeholder="please enter">
                <el-button @click="search" slot="append">search</el-button>
                <el-button @click="clearSearch" slot="append">cancel search</el-button>
            </el-input>
        </div>
    </div>

    <el-tabs type="border-card" v-model="activeName" @tab-click="updateData">
      <el-tab-pane label="All Projects">
        <div style="margin: 0px 15px 20px 0px;">
          <el-button type="primary" @click="addProject"><span style="padding-left:3px">Add projects selected</span></el-button>
        </div>
        <template>
          <el-table
            :header-cell-style="{background:'#F2F6FC',color:'#606266'}"
            :data="projectAll"
            border
            style="width: 100%"

            @selection-change="checkProjectAddSelect"
            ref="projectAll"
            class="emp_table"
            v-if="projectAll">
            <el-table-column type="selection" width="55" ></el-table-column>
            <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
            <el-table-column
              align="center"
              prop="project_id"
              label="Project Id"
              width="180">
            </el-table-column>
            <el-table-column
              align="center"
              prop="project_name"
              label="Project Name">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pm_name"
              label="PM Name"
            :formatter="PmName">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pm_username"
              label="PM Account Num"
              :formatter="numFormatter">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pm_email"
              :formatter="emailFormatter"
              label="PM e-mail">
            </el-table-column>
            <el-table-column
              align="center"
              prop="project_status"
              label="Project Status">
            </el-table-column>
            <el-table-column
              align="center"
              prop="active"
              :formatter="formatBoolean"
              label="Active">
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          align="right"
          @size-change="handleSizeChange"
          @current-change="curPageChange"
          :current-page.sync="currentPage1"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </el-tab-pane>

      <el-tab-pane label="Added Projects">
        <div style="margin: 0px 15px 10px 0px;">
          <el-button type="primary" @click="deleteProject"><span style="padding-left:3px">Delete projects selected</span></el-button>
        </div>
        <template>
          <el-table
            :header-cell-style="{background:'#F2F6FC',color:'#606266'}"
            :data="projectAdded"
            border
            style="width: 100%"

            @selection-change="checkProjectDeleteSelect"
            ref="projectAdded"
            class="emp_table"
            v-if="projectAdded">
            <el-table-column type="selection" width="55" ></el-table-column>
            <el-table-column label="S/N" type="index" width="60" align="center"></el-table-column>
            <el-table-column
              align="center"
              prop="project_id"
              label="Project Id"
              width="180">
            </el-table-column>
            <el-table-column
              align="center"
              prop="project_name"
              label="Project Name">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pm_name"
              label="PM Name"
              :formatter="PmName">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pm_username"
              label="PM Account Num"
              :formatter="numFormatter">
            </el-table-column>
            <el-table-column
              align="center"
              prop="pm_email"
              :formatter="emailFormatter"
              label="PM e-mail">
            </el-table-column>
            <el-table-column
              align="center"
              prop="project_status"
              label="Project Status">
            </el-table-column>
            <el-table-column
              align="center"
              prop="active"
              :formatter="formatBoolean"
              label="Active">
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          align="right"
          @size-change="handleSizeChange"
          @current-change="curPageChange"
          :current-page.sync="currentPageAdded"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="countAdded">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import {getProjectList,addProject,getProjectAddedList,deleteProject,searchProject} from '../../request/api'

export default {
  components:{

  },
  data() {
    return {
      //所有项目
      projectAll: "",
      //已经加入到系统的项目
      projectAdded: "",
      //选中的要加入的项目
      projectAddList:[],
      //选中的要删除的项目
      projectDeleteList:[],
      //输入的项目查询
      projectSearchStr: '',
      //当前选中的是所有列表还是已经加入的列表
      activeName: '',
      //所有项目列表当前页码
      currentPage1:1,
      //所有项目总数据量
      count:0,
      //已经加入项目列表当前页码
      currentPageAdded:1,
      //已经加入项目总数据量
      countAdded:0,
      // 等级
      level:'',
      //是否在搜索状态中
      isSearch:false
    }
  },
  mounted () {
    const token = sessionStorage.getItem('token')
    this.level = sessionStorage.getItem('level')
  },
  created() {
    getProjectList().then(res => {
      this.projectAll = res.data
      this.count = res.count
    })
    getProjectAddedList().then(res => {
      this.projectAdded = res.data
      this.countAdded = res.count
    })
  },
  methods: {
    pmName:function(row, column){
      var ret = ''
      if(row.pm_name == ""){
        ret = 'no data'
      }else {
        ret =  row.pm_name
      }
      return ret;
    },

    //全部项目分页
    getAll(){
      getProjectList({
        page:this.currentPage1
      }).then(res =>{
          this.count = res.count
          this.projectAll = res.data
      })
    },
    //已经添加进系统项目分页
    getAdded(){
      getProjectAddedList({
        page:this.currentPageAdded
      }).then(res =>{
          this.countAdded = res.count
          this.projectAdded = res.data
      })
    },
    //搜索全部项目分页
    getSearchAllData(){
      searchProject({
        keyword:this.projectSearchStr,
        isAll:0,
        page:this.currentPage1
      }).then(res => {
        this.projectAll = res.data
        this.count = res.count
      })
    },
    //搜索已经添加进系统项目分页
    getSearchAddedData(){
      searchProject({
        keyword:this.projectSearchStr,
        isAll:1,
        page:this.currentPageAdded
      }).then(res => {
        this.projectAdded = res.data
        this.countAdded = res.count
      })
    },
    //点击tab栏时更新数据
    updateData(tab,event){
      if(tab.index == 0){
        getProjectList().then(res => {
          this.projectAll = res.data
          this.count = res.count
        })
        this.projectSearchStr = ''
        this.currentPage1 = 1
      }
      if(tab.index == 1){
        getProjectAddedList().then(res => {
          this.projectAdded = res.data
          this.countAdded = res.count
        })
        this.projectSearchStr = ''
        this.currentPageAdded = 1
      }
    },
    // 添加项目到系统
    addProject(){
      if(this.projectAddList == 0){
        alert("No selected projects!")
      } else {
        addProject({
          data:this.projectAddList
        }).then(res => {
          if(res.code == 200){
            this.getAll()
            this.$message.success("Success!")
          }else {
            this.$message.error('Sorry!Failed!');
          }
        })
      }
    },
    //从系统中删除项目
    deleteProject(){
      if(this.projectDeleteList == 0) {
        alert("No selected projects!")
      } else {
        deleteProject({
          data:this.projectDeleteList
        }).then(res => {
          if(res.code == 200){
            this.getAdded()
            this.$message.success("Delete Success!")
          } else {
            this.$message.error('Sorry!Failed!');
          }
        })
      }

    },
    //搜索项目
    search(){
      this.isSearch = true
      searchProject({
        keyword:this.projectSearchStr,
        isAll:this.activeName,
      }).then(res => {
        if(res.code == 200){
          if(this.activeName == 0) {
            this.projectAll = res.data
            this.count = res.count
            this.currentPage1 = 1
          }
          if(this.activeName == 1) {
            this.projectAdded = res.data
            this.countAdded = res.count
            this.currentPageAdded = 1
          }
        } else {
          this.$message.error('Sorry!Failed!');
        }
      })
    },
    //取消搜索
    clearSearch(){
      this.isSearch = false
      if(this.activeName == 0){
        getProjectList().then(res => {
          this.projectAll = res.data
          this.count = res.count
          this.currentPage1 = 1
        })
      }
      if (this.activeName == 1) {
        getProjectAddedList().then(res => {
          this.projectAdded = res.data
          this.countAdded = res.count
          this.currentPageAdded = 1
        })
      }
      this.projectSearchStr = ''
    },
    checkProjectAddSelect(data){
      this.projectAddList = []
      const list = data
      list.forEach(item => {
        this.projectAddList.push({'project_id':item.project_id})
      })
    },
    checkProjectDeleteSelect(data){
      this.projectDeleteList = []
      const list = data
      list.forEach(item => {
        this.projectDeleteList.push({'project_id':item.project_id})
      })
    },
    handleSizeChange(val) {
    },
    //  点击每页刷新获取数据
    curPageChange (currentPage) {
      if(this.activeName == 0){
        this.currentPage1 = currentPage
        if(this.isSearch) {
          this.getSearchAllData()
        } else {
          this.getAll()
        }
      }
      if(this.activeName == 1){
        this.currentPageAdded = currentPage
        if(this.isSearch) {
          this.getSearchAddedData()
        } else {
          this.getAdded()
        }
      }
    },
    // 上一页
    prevClick () {
      if(this.activeName == 0){
        this.currentPage1 < 1 ? this.currentPage1 = 1 : this.currentPage1--
        if(this.isSearch) {
          this.getSearchAllData()
        } else {
          this.getAll()
        }
      }
      if(this.activeName == 1){
        this.currentPageAdded < 1 ? this.currentPageAdded = 1 : this.currentPageAdded--
        if(this.isSearch) {
          this.getSearchAddedData()
        } else {
          this.getAdded()
        }
      }
    },
    // 下一页
    nextClick () {
      if(this.activeName == 0){
        this.currentPage1 >= this.count ? this.currentPage1 = this.count : this.currentPage1++
        if(this.isSearch) {
          this.getSearchAllData()
        } else {
          this.getAll()
        }
      } else if(this.activeName == 1){
        this.currentPageAdded >= this.count ? this.currentPageAdded = this.count : this.currentPageAdded++
        if(this.isSearch) {
          this.getSearchAddedData()
        } else {
          this.getAdded()
        }
      }
    },
    formatName(row){
      if(row.pm_name == "姜奉祥"){
        return 'no data'
      }
    },
    formatBoolean: function (row, column, cellValue) {
      var ret = ''
      if (cellValue) {
        ret = "yes"
      } else {
        ret = "no"
      }
      return ret;
    },
    PmName(row){
      if(row.pm_name == ''){
        return 'no data'
      }else {
        return row.pm_name
      }
    },
    numFormatter(row){
      if(row.pm_username == ''){
        return 'no data'
      }else {
        return row.pm_username
      }
    },
    emailFormatter(row){
      if(row.pm_email == ''){
        return 'no data'
      }else {
        return row.pm_email
      }
    }

  },
}
</script>

<style lang="less">
.title{
  font-family: SourceHanSansSC;
  font-weight: 700;
  font-size: 20px;
  color: rgb(16, 16, 16);
  font-style: normal;
  letter-spacing: 0px;
  line-height: 30px;
  text-decoration: none;
  margin-bottom: 10px;
}
.search {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.permitImg{
  width: 35px;
  height: 35px;
}
.dig-form{
  width: 90%;
  height: 100%;
  margin: 0 auto;
}
.preImg{
  width:56px;
  border-radius:4px;
  height:40px;
  margin-right:15px
}
</style>
